<!--
 * @Author: your name
 * @Date: 2020-05-19 18:04:23
 * @LastEditTime: 2021-10-21 10:09:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/components/GattView/GattRight/index.vue
 -->
<template>
  <div ref="ganteview" class="gt-w">
    <div
      ref="gtWBox"
      class="gt-w-box">
      <div :style="{width:headerWidth+'px'}" class="gt-w-box-header" >
        <!-- 顶部年/半年/季度/月 -->
        <div class="gt-w-box-header-time gt-w-box-header-toptime">
          <div class="gt-w-box-header-time-cell"
            :title="item.date"
            v-for="(item,index) in topTimeData"
            :key="index"
            :style="{width:item.width+'px',left:item.left+'px'}">
              {{item.date}}
          </div>
        </div>
        <!-- 顶部天 -->
        <div class="gt-w-box-header-time gt-w-box-header-bottomtime">
          <div class="gt-w-box-header-time-cell"
            :title="item.title"
            v-for="(item,index) in bottomTimeData"
            :key="index"
            :style="{width:item.width+'px',left:item.left+'px'}">
              {{item.date}}
            </div>
        </div>
      </div>
      <ganteview-item
        :headData="headData"
        :style="{width:headerWidth+'px'}"
        v-if="showItem"
        class="gt-w-box-content"
        @setRowColor="setRowColor"
        :uuId="uuId"
        :data="data" >
        <div
          v-for="(item,index) in bottomTimeData"
          :key="index"
          class="gt-w-box-content-column"
          :style="{width:item.width+'px',left:item.left + 'px',background:item.isRest?'#f5f7fa':null}">
          </div>
      </ganteview-item>
    </div>
  </div>
</template>

<script>
import GanteviewItem from './components/GanteviewItem.vue'
export default {
  name: '',
  components: {
    GanteviewItem
  },
  props: {
    data: Array,
    headData: Object,
    startTime: {}, // 开始时间
    endTime: {},
    uuId: String
  },
  data () {
    return {
      rowW: 50, // 每个格子占的像素(默认为50)
      firstDay: null, // 开始的时间
      endDay: null, // 结束的时间
      topTimeData: [], // 顶部时间刻度
      bottomTimeData: [], // 底部时间刻度
      headerWidth: 0, // 时间组件的宽度
      futureTime: 0, // 顶部时间的最大的时间
      timeJiange: 0,
      showItem: false
    }
  },
  methods: {
    init (params) {
      // 时间模式，1 天 2周，3月，4季，5半年
      const timeMode = params.timeMode ? params.timeMode : 1
      // 头部时间表头显示模式
      const mode = params.mode ? params.mode : 1
      // 天，周，月，季，半年等时间模式下的对应方格的基准基数
      const time = params.time ? params.time : 0
      this.firstDay = params.firstDay ? params.firstDay : null
      this.endDay = params.endTime ? params.endTime : null
      this.rowW = params.rowW ? params.rowW : 50
      this.headerWidth = 0
      // const ganteWidth = this.$refs.ganteview.width * 0.8
      const ganteWidth = document.getElementsByTagName('body')[0].clientWidth * 0.8
      // 所有的时间总和
      var totalTime = 0
      // 开始时间
      this.timeJiange = time
      this.showItem = true
      totalTime = this.getTotalTime(time, ganteWidth, this.firstDay, this.endDay)
      this.getTopTime(mode, this.firstDay, time, totalTime, timeMode)
    },
    // 获取顶部时间
    getTopTime (mode, firstTime, time, totalTime, timeMode) {
      var list = []
      for (let i = 0; i <= totalTime;) {
        var oldTime = firstTime
        // 年月格式时间
        var date = this.format(oldTime, 2)
        if (mode === 1) {
          // 月的形式
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth() + 1, 1)
        } else if (mode === 2) {
          // 年的形式
          firstTime = new Date(firstTime.getFullYear() + 1, 0, 1)
          date = this.format(oldTime, 5)
        }
        var width = (firstTime.getTime() - oldTime.getTime()) / time
        this.headerWidth += width
        list.push({ left: (oldTime.getTime() - this.firstDay.getTime()) / time, width: width, date: date })
        i = firstTime.getTime()
        this.futureTime = i
      }
      this.topTimeData = list
      if (this.futureTime) {
        totalTime = this.futureTime
      }
      this.getBottomTime(timeMode, this.firstDay, time, totalTime)
    },
    // 获取底部时间
    getBottomTime (mode, firstTime, time, totalTime) {
      var list = []
      for (let i = 0; i <= totalTime;) {
        var oldTime = firstTime
        var date = this.format(oldTime, 3)
        var title = this.format(oldTime, 1)
        var isRest = false
        if (mode === 1) {
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth(), firstTime.getDate() + 1)
          if (oldTime.getDay() === 0 || oldTime.getDay() === 6) {
            isRest = true
          }
        } else if (mode === 2) {
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth(), firstTime.getDate() + 7)
          title = this.format(oldTime, 1) + '~' + this.format(new Date(firstTime.getFullYear(), firstTime.getMonth(), firstTime.getDate() - 1), 1)
        } else if (mode === 3) {
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth() + 1, 1)
          date = this.format(oldTime, 4)
          title = this.format(oldTime, 2)
        } else if (mode === 4) {
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth() + 3, 1)
          date = this.formatHalfYear(oldTime.getMonth(), 'month')
          title = this.format(oldTime, 1) + '~' + this.format(new Date(firstTime.getFullYear(), firstTime.getMonth(), 0), 1)
        } else if (mode === 5) {
          firstTime = new Date(firstTime.getFullYear(), firstTime.getMonth() + 6, 1)
          date = this.formatHalfYear(oldTime.getMonth(), 'year')
          title = this.format(oldTime, 1) + '~' + this.format(new Date(firstTime.getFullYear(), firstTime.getMonth(), 0), 1)
        }
        var width = (firstTime.getTime() - oldTime.getTime()) / time
        i = firstTime.getTime()
        if (i <= totalTime) {
          list.push({ left: (oldTime.getTime() - this.firstDay.getTime()) / time, width: width, date: date, title: title, isRest: isRest })
        }
      }
      this.bottomTimeData = list
    },
    getTotalTime (time, ganteWidth, firstDay, endTime) {
      // 获取时间总和
      var totalTime = 0
      if (endTime) {
        // 如果有自定义结束时间
        totalTime = new Date(endTime).getTime()
        if (ganteWidth * time >= (totalTime - new Date(firstDay).getTime())) {
          totalTime = ganteWidth * time + new Date(firstDay).getTime()
        }
      } else {
        totalTime = ganteWidth * time + new Date(firstDay).getTime()
      }
      return totalTime
    },
    // 格式化季度或年份的上下半年
    formatHalfYear (time, mode) {
      let date = ''
      if (mode === 'month') {
        if (time <= 2 && time >= 0) {
          date = 'Q1'
        } else if (time <= 5 && time >= 3) {
          date = 'Q2'
        } else if (time <= 8 && time >= 6) {
          date = 'Q3'
        } else if (time <= 11 && time >= 9) {
          date = 'Q4'
        }
      } else if (mode === 'year') {
        if (time <= 5 && time >= 0) {
          date = 'Y1'
        } else if (time <= 11 && time >= 6) {
          date = 'Y2'
        }
      }
      return date
    },
    // 格式化时间
    format (time, mode) {
      var year = time.getFullYear()
      var month = time.getMonth() + 1
      var day = time.getDate()
      if (mode === 1) {
        return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
      } else if (mode === 2) {
        return year + '-' + (month < 10 ? '0' + month : month)
      } else if (mode === 3) {
        return day < 10 ? '0' + day : day
      } else if (mode === 4) {
        return month < 10 ? '0' + month : month
      } else if (mode === 5) {
        return year
      }
    },
    setRowColor (id) {
      this.$emit('setRowColor', id)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .gt-w{
    height: 100%;
    position: relative;
    overflow: hidden;
    &-box{
      height: 100%;
      position: relative;
      overflow-x: auto;
      overflow-y: hidden;
      &::-webkit-scrollbar{
        width: 5px;
        height: 5px;
      }
      &::-webkit-scrollbar-track{
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      &::-webkit-scrollbar-thumb{
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
        background-color: #ccc;
      }
      &-header{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 44px;
        background-color: #F3F3F3;
        font-size: 13px;
        z-index: 20;
        &-time{
          height: 22px;
          line-height: 22px;
          position: relative;
          &-cell{
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
            word-break: break-all;
            font-weight: bold;
            height: 100%;
            position: absolute;
            text-align: center;
            // padding-left: 4px;padding-leftpadding-left
          }
        }
      }
      &-content{
        padding-top: 44px;
        box-sizing: border-box;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar{
          width: 5px;
          height: 5px;
        }
        &::-webkit-scrollbar-track{
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
          background-color: #F5F5F5;
        }
        &::-webkit-scrollbar-thumb{
          border-radius: 10px;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
          background-color: #ccc;
        }
        &-column{
          position: absolute;
          top: 0;
          border-right: 1px solid #ebeef5;
          bottom: 0;
          z-index: 0;
          box-sizing: border-box;
        }
      }
    }
  }
</style>
